<template>
  <AppLayout class="page-wrap">
    <!-- 商品类型 -->
    <view class="types">
      <view class="type" v-for="i in 4">
        <image src="/static/goods/putao.png"></image>
        <text>居家用品</text>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <text class="title">居家用品</text>
      <view class="list">
        <navigator class="goods" v-for="i in 20" url="/pages/goods/details">
          <image src="/static/goods/putao.png"></image>
          <text class="goods-title">日本晴王葡萄 香印青提 阳光玫瑰提子新鲜水果 日本引种4斤礼盒装顺丰 特级2斤礼盒装 特级3斤礼盒装</text>
          <view class="goods-price">
            <text>49.00</text>
          </view>
        </navigator>
        <!-- 占位 -->
        <view class="goods" v-for="i in (20%3 === 0 ? 0 : 3 - 20%3)"></view>
      </view>
    </view>
  </AppLayout>
</template>

<script>
  import AppLayout from '@/layouts/AppLayout'
  export default {
    components: { AppLayout }
  }
</script>

<style lang="scss">
  @import "../../style/variables";

  .page-wrap {
    padding: 0 $gap-mini;
  }

  // 商品类型列表
  .types {
    background-color: $background-color-module;
    display: flex;
    padding: $gap-middle;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    // 类型
    .type {
      width: 160rpx;
      text-align: center;
      // 类型图片
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      // 类型名称
      text {
        display: block;
        font-size: $font-size-mini;
      }
    }
  }

  // 商品列表
  .goods-list {
    background-color: $background-color-module;
    padding: $gap;
    margin-top: $gap;
    // 分类标题
    .title {
      display: block;
      font-size: $font-size-middle;
      padding: $gap-mini 0;
    }
    // 列表
    .list {
      padding: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // 商品
      .goods {
        width: 230rpx;
        flex-shrink: 0;
        margin-bottom: $gap-big;
        text-align: center;
        padding: 0 $gap-mini;
        box-sizing: border-box;
        // 商品标题
        .goods-title {
          text-align: left;
          font-size: $font-size-mini;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis
        }
        // 商品图片
        image {
          width: 210rpx;
          height: 210rpx;
        }
        // 商品价格
        .goods-price {
          color: $primary-color;
          text-align: left;
          &::before {
            content: '¥';
            font-size: $font-size-mini;
            margin-right: $gap-mini;
          }
        }
      }
    }
  }
</style>
